<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="flex flex-center">
				<view class="flex-1 flex flex-column grid-gap-1">
					<text class="h9 font-weight-600"> {{ info.title }}，欢迎回来 </text>
					<text class="h10 text-primary" v-if="info.province_id">{{ info.province }}
						{{ info.city }} {{ info.area }}</text>
					<text class="h10 text-grey" v-if="!info.state">{{ info.message }}</text>
				</view>
			</view>
			<view class="bg-white rounded-4 flex flex-column grid-gap-4 p-4">
				<view class="flex flex-center grid-gap-2">
					<text class="font-weight-600">数据概览</text>
					<view class="flex-1"></view>
					<text class="h10" v-for="item in dateArr" :key="item.value"
						:class="[search.date === item.value ? 'text-primary' : 'text-placeholder']"
						@tap="setSearch('date', item.value)">{{ item.title }}</text>
				</view>
				<view class="grid-columns-6 grid-gap-4">
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_num) }}</text>
						<view class="h9">订单量</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.order_price) }}</text>
						<view class="h9">订单额</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.duration) }}</text>
						<text class="h9">分钟</text>
						<view class="h9">服务时长</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.commission) }}</text>
						<view class="h9">分佣</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.empty_channels) }}</text>
						<view class="h9">空码</view>
					</view>
					<view class="grid-column-2 bg rounded-4 py-2 flex flex-column flex-center">
						<text class="h6 text-primary font-weight-600">{{ $func.formatNumber(statistics.channels) }}</text>
						<view class="h9">渠道量</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">常用功能</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
						v-for="(item, index) in menu" :key="index" @tap="$page.open(item.page, true)">
						<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
						<text class="h9 font-weight-500">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { $func, $api, $message, $page } from '@/utils';
import { useMap } from '@/utils/map'
import { onLoad } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const loading = ref(true);
const info = ref({
	id: '',
	title: '',
	province_id: '',
	state:1
});
const search = ref({
	date: 'day',
	salesman_id: ''
});
const dateArr = ref([{
	title: '今日',
	value: 'day'
},
{
	title: '昨日',
	value: 'yesterday'
},
{
	title: '本周',
	value: 'week'
},
{
	title: '本月',
	value: 'month'
},
{
	title: '上月',
	value: 'last_month'
}
]);
const statistics = ref({
	order_num: '--',
	order_price: '--',
	duration: '--',
	commission: '--',
	empty_channels: '--',
	channels: '--',
});
const menu = ref([
	{
		name: '我的团队',
		icon: '/static/icons/user/people.png',
		page: '/salesman/pages/people/index'
	},
	{
		name: '财务明细',
		icon: '/static/icons/user/bill.png',
		page: '/salesman/pages/user/wallet/log'
	},
	{
		name: '提现',
		icon: '/static/icons/user/withdrawal.png',
		page: '/salesman/pages/user/wallet/withdrawal'
	},
	{
		name: '创建空码',
		icon: '/static/icons/user/qrcode.png',
		page: '/salesman/pages/qrcode/index'
	}
]);
const getInfo = () => {
    loading.value = true;
	$api.Salesman.user().then((data:any) => {
		info.value = data;
	}).catch(() => {
	}).finally(() => {
		loading.value = false;
	})
}
const setSearch = (key:any, val:any) => {
	search.value[key] = val;
	getStatistics();
}
const getStatistics = () => {
	$api.Salesman.statistics(search.value).then((data:any) => {
		statistics.value = data;
	})
}
onLoad(() => {
	getInfo();
	getStatistics();
})
</script>
